<template>
  <div class="tag-lib">
    <div style="margin-bottom: 15px;">
      <span>项目：</span>
      <el-select size="mini" style="width: 150px;" v-model="projectId" @change="onAppChange">
        <el-option v-for="item in permission_projectList" :value="item.app_id" :label="item.name" :key="item.app_id"></el-option>
      </el-select>
    </div>
    <div class="head">
      <div class="label">所有类目</div>
      <el-radio-group v-model="typeValue">
        <el-radio-button :label="0">反馈标签管理</el-radio-button>
        <el-radio-button :label="1">处理结果标签管理</el-radio-button>
      </el-radio-group>
    </div>
    <div class="content">
      <div
        v-show="typeValue === 0"
        class="content_Item"
      >
        <tag-admin ref="TagAdmin" :type="typeValue" :projectId="projectId"/>
      </div>
      <div
        v-show="typeValue === 1"
        class="content_Item"
      >
        <res-admin ref="ResAdmin" :projectId="projectId"/>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">
import { mapGetters } from 'vuex'
import TagAdmin from './components/TagAdmin.vue'
import ResAdmin from './components/ResAdmin.vue'
export default {
  name: 'TagLib',
  components: { TagAdmin, ResAdmin },
  props: {},
  data () {
    return {
      projectId: null,
      typeValue: 0
    }
  },
  created () {
    if (this.permission_projectList.length) {
      this.projectId = this.permission_projectList[0].app_id
    }
  },
  methods: {
    onAppChange () {
      this.$nextTick(() => {
        this.$refs.TagAdmin.init()
        this.$refs.ResAdmin.init()
      })
    }
  },
  computed: {
    ...mapGetters('zcsd-core', ['permission_projectList'])
  }
}
</script>

<style lang="scss" scoped>
.tag-lib {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  .head {
    display: flex;
    align-items: center;
    margin-bottom: 60px;
    .label {
      margin-right: 20px;
      font-weight: bold;
    }
  }
  .content {
    flex: 1;
    .content_Item {
      height: 100%;
    }
  }
}
</style>
